<template>
  <el-card class="box-card">
    <div class="title">个人信息</div>
    <div class="maincontain">
      <!-- 头像区域 -->
      <div class="avatar-container">
        <el-avatar
          shape="square"
          :size="150"
          fit="fill"
          :src="userInfo.avatar"
        ></el-avatar>
        <el-button round @click="sendMessage">私信</el-button>
      </div>
      <!-- 信息区域 -->
      <div class="info">
        <div class="info-item">用户名：{{ userInfo.username }}</div>
        <div class="info-item">姓名：{{ userInfo.realName }}</div>
        <div class="info-item">手机电话：{{ userInfo.phoneNumber }}</div>
        <div class="info-item">QQ号码：{{ userInfo.qqNumber }}</div>
        <div class="info-item">电子邮箱：{{ userInfo.email }}</div>
        <div class="info-item">学习方向：{{ userInfo.major }}</div>
        <div class="info-item">就读大学：{{ userInfo.university }}</div>
        <div class="info-item">个人简介：{{ userInfo.userProfile }}</div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { reqUserProfile } from "@/api";
export default {
  name: "player",
  data() {
    return {
      userInfo: {},
    };
  },
  computed: {
    userId() {
      return this.$route.params.id || this.$store.state.userId;
    },
    competitionId() {
      return (
        this.$route.params.competitionId || this.$store.state.competitionId
      );
    },
  },
  mounted() {
    this.$store.commit("SET_USER_ID", this.userId);
    this.getUserInfo();
  },
  methods: {
    async getUserInfo() {
      try {
        const res = await reqUserProfile({
          userId: this.userId,
          competitionId: this.competitionId,
        });
        if (res.code === 200) {
          this.userInfo = res.data;
        } else {
          this.$message.error("获取用户信息失败");
        }
      } catch (error) {
        console.error("获取用户信息失败:", error);
        this.$message.error("获取用户信息失败");
      }
    },
    sendMessage() {
      this.$router.push("/manage/privateMessage");
    },
  },
};
</script>

<style lang="scss" scoped>
// 主题色定义
$primary-color: #409eff;
$light-bg: #f9f9f9;
$text-color: #333;
$sub-text: #666;

.box-card {
  width: 65%;
  height: auto;
  margin: 20px auto;
  padding: 30px;
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  }

  .title {
    font-size: 28px;
    font-weight: 700;
    color: $primary-color;
    margin-bottom: 25px;
    text-align: center;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(
        90deg,
        transparent,
        $primary-color,
        transparent
      );
    }
  }

  .maincontain {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;

    .avatar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
      transition: transform 0.3s ease;

      &:hover {
        transform: scale(1.05);
      }

      .el-avatar {
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .el-button {
        background: $primary-color;
        color: white;
        font-weight: 500;
        padding: 10px 20px;
        transition: all 0.3s ease;

        &:hover {
          background: darken($primary-color, 10%);
        }
      }
    }

    .info {
      flex: 1;
      min-width: 250px;
      background: #fff;
      padding: 20px 25px;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      border-left: 4px solid $primary-color;

      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 18px;
        color: $text-color;
        font-size: 16px;
        transition: transform 0.2s ease;

        &:hover {
          transform: translateX(5px);
        }

        &::before {
          content: "🔹";
          margin-right: 10px;
          color: $primary-color;
        }
      }
    }
  }

  // 响应式适配
  @media (max-width: 768px) {
    width: 95%;

    .maincontain {
      flex-direction: column;
      align-items: center;
    }

    .info {
      border-left: none;
      margin-top: 20px;
    }
  }
}
</style>
